<template>
    <div class="m-container">
        <Header></Header>
        <div class="mblog">
            <h2>{{blog.title}}</h2>
            <el-link icon="el-icon-edit" v-if="ownBlog"><router-link :to="{name: 'BlogEdit',params:{blogId: blog.id}}">编辑</router-link></el-link>
            <el-divider></el-divider>
            <div class="content markdown-body" v-html="blog.content"></div>
        </div>
    </div>
</template>

<script>
    import 'github-markdown-css'
    import Header from "@/components/Header";
    export default {
        name: "BlogDetail",
        components: {Header},
        data() {
            return {
                blog: {
                    userId: null,
                    title: "",
                    description: "",
                    content: ""
                },
                ownBlog: false
            }
        },
        methods: {
            getBlog(){
                const blogId = this.$route.params.blogId;
                const _this = this;
                this.$axios.get('/blog/'+blogId).then(res =>{
                    console.log("========获取当前 blogId = "+blogId+" 的blog详情:",res.data.data);
                    const blog = res.data.data;
                    this.blog = blog;

                    _this.blog.id = blog.id;
                    _this.blog.title = blog.title;

                    let MarkdownIt = require('markdown-it');
                    let md = new MarkdownIt();

                    let result = md.render(blog.content);
                    _this.blog.content = result;
                    _this.ownBlog = (blog.userId === _this.$store.getters.getUser.id)

                })
            }
        },
        created() {
            this.getBlog();
        }
    }
</script>

<style scoped>
    .mblog {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        width: 100%;
        min-height: 700px;
        padding: 20px 15px;
        text-align: left;
    }
</style>